<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>18_排他思想-案例练习-轮播图小圆点</title>

        <style>
            * {
                margin: 0;
                padding: 0;
            }

            ul::after {
                content: "";
                display: block;
                clear: both;
            }

            ul li {
                list-style: none;
                float: left;
                width: 40px;
                height: 40px;
                background-color: #ccc;
                border-radius: 50%;
                margin-right: 10px;
            }

            ul li:last-child {
                margin-right: 0;
            }

            .current {
                background-color: red;
            }


        </style>
    </head>
    <body>
        <ul>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <script>
            var li_list = document.querySelectorAll('li');

            for(var i = 0; i < li_list.length; i++){
                li_list[i].onclick = function(){
                    for(var j = 0; j < li_list.length; j++){
                        li_list[j].style.backgroundColor = '#ccc';
                    }

                    this.style.backgroundColor = 'red';
                }
            }
        </script>
    </body>
</html>